<template>
	<view class="review">
		<view class="review-box">

			
			<view class="review-item" v-for="(item,index) in comments">
				<view class="item-img">
					<image class="person-img" :src="item.avatar" mode=""></image>
				</view>
				<view class="item-text">
					<view class="person">
						<view class="person-name">
							{{item.author}}
						</view>
						<view class="tip">
							<image class="tip-img" src="../../static/most.png" mode=""></image>
						</view>
					</view>
					<view class="person-review">
						{{item.content}}
					</view>
					<view class="other-reply" v-if="item.reply_to">
						//{{item.reply_to.content}}
					</view>
					<view class="date">
						<view class="date-date">
							<view class="date-day">
								{{getCnDate(item.time,0)}}
							</view>
						</view>
						<view class="date-right">
							<view class="num-zan">
								<view class="num">
									{{item.likes}}
								</view>
								<view class="zan">
									<uni-icons type="hand-up" size="20" color="#9c9c9c"></uni-icons>
								</view>
								<view class="message">
									<uni-icons type="chatbubble" size="20" color="#9c9c9c"></uni-icons>
								</view>
							</view>


						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'review',
		data() {
			return {
				comments:[]
			}


		},
		onLoad(option) {
			this.getReview(option.dayid)
			console.log(option.dayid)
		},
		methods: {
			getReview(id) {
				uni.request({
					url: `https://apis.netstart.cn/zhihudaily/story/${id}/short-comments`,
					success: res => {
						
						console.log(res.data);
						this.comments = res.data.comments
						
					}
				})
			},
			getCnDate(unixTimeStamp = '', isType = 1) {
			           let date1;
			           if (unixTimeStamp) {
			               date1 = new Date(unixTimeStamp * 1000);
			           } else {
			               date1 = new Date();
			           }
				
			           let year = date1.getFullYear(); // 年
			           let month = date1.getMonth() +1; // 月, 月份是从0开始算的 0 - 11
			           let date = date1.getDate(); // 日
						
			           let hour = date1.getHours(); // 时
			           let minute = date1.getMinutes(); // 分
			           let second = date1.getSeconds(); // 秒
						
			           // 优化一下，一般在显示 月 日 时分秒的时候我们习惯按照两位的方式去显示；如果数字是一位的我们补齐一个0即可
			           month = month < 10 ? '0' + month : month;
			           date = date < 10 ? '0' + date : date;
			           hour = hour < 10 ? '0' + hour : hour;
			           minute = minute < 10 ? '0' + minute : minute;
			           second = second < 10 ? '0' + second : second;
						
			           let week = date1.getDay(); // 星期， 星期也是从0开始算的 0 是星期日；1是星期一
			           // 2021年12月20日10:44:12
			           // 2021-12-20 10:44:16
			           return isType == 1 ? year + '年' + month + '月' + date + '日' + hour + ':' + minute + ':' + second + '星期' + weeks[week] : `${month}-${date} ${hour}:${minute}`;
						
			       },
		}

	}
</script>

<style lang="less" scoped>
	.review-item {
		display: flex;
		padding: 30rpx 20rpx;
		border-bottom: 2rpx solid #e8e8e8;

		.item-text {
			margin-left: 20rpx;
			width: 100%;
			.person-name {
				// font-size: 34rpx;
			}

			.person-review {
				color: #4f4f4f;
				font-size: 28rpx;
			}

			.other-reply {
				color: #9c9c9c;
				font-size: 26rpx;
			}
		}

		.person-img {
			width: 32px;
			height: 32px;
			border-radius: 50%;
		}

		.person {
			display: flex;
			justify-content: space-between;
		}

		.tip-img {
			width: 32rpx;
			height: 32rpx;
		}

		.date {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			color: #ccc;
			font-size: 24rpx;
		}

		.date-right {
			display: flex;
		}

		.num-zan {
			display: flex;

			.num {
				height: 40rpx;
				line-height: 40rpx;
			}

			.zan {
				margin-right: 40rpx;
			}
		}
	}
</style>
